<!-- 婚恋 -->
<template>
	<view class="container">
		<Navbar title="报告查询" bgColor="#FF84B5" leftIconColor="#fff" :titleStyle="{color: '#fff'}" />
		
		<view class="banner relative d-flex">
			<image src="/static/image/marriage/icon2.svg" mode="widthFix" class="icon icon1" />
		</view>
		
		<view class="content">
			<BasicReport class="mb-20" />
			
			<OptionalModules class="mb-20" />
			
			<RuleForm btnText="立即查询￥39.8" :titleStyle="{color: '#FF0067'}">
				<template #head_describe>
					<navigator class="onDetail">报告示例 <Icon name="arrow-right" class="ml-10 relative href_icon" color="#000" size="25rpx" /></navigator>
				</template>
			</RuleForm>
		</view>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	import BasicReport from '@/query/Marriage/components/BasicReport.vue'
	import OptionalModules from '@/query/Marriage/components/OptionalModules.vue'
	import RuleForm from '@/query/components/ruleForm.vue'
</script>

<style scoped lang="scss">
@import '@/query/scss/index.scss';

.container {
	background-color: #FF84B5;
	
	.banner {
		.icon1 {
			margin: auto;
		}
	}
	
	.content {
		padding: {
			top: 25rpx;
			bottom: 25rpx;
		}
		.card {
			::v-deep {
				.card_title {
					color: #FF0067;
				}
			}
		}
	}
	
	.onDetail {
		flex-direction: row;
		align-items: center;
		font: {
			size: 24rpx;
		}
		
		.href_icon {
			top: 3rpx;
		}
	}
}
</style>
